<template>
  <!-- 理财列表项 -->
  <div class="madp-financial-licai-item wrap">
    <div class="content white">
      <!-- 产品列表 -->
      <div @click="goToDetail(info)">
        <div class="product_item">
          <div class="flex" :style="{ justifyContent: info.taCode != 'Y5' ? '' : 'flex-start' }">
            <div class="product_name">
              <span v-if="info.taCode == 'Y5'">(代销)</span>
              {{ info.name }}
              <span class="tip" v-if="info.prdLable">{{ info.prdLable }}</span>
            </div>
            <div class="pro_contr" v-if="info.taCode == 'Y5'">| 管理人{{ info.taName }}</div>
            <div class="product_status weight" v-if="info.purchaseType !== '0'">
              {{ info.purchaseType === '0' ? '' : info.purchaseType === '1' ? '停售' : info.purchaseType === '2' ? '预售' : info.purchaseType === '3' ? '预购' : '' }}
            </div>
          </div>
          <div class="product_content">
            <div class="rate flex">
              <!-- 货币T+1产品D310除外 -->
              <div class="product_rate red weight" v-if="info.reserve1 != '1309'">
                <!-- 
                        标识1 
                        募集期改为“新品首发”
                        产品成立后 取标识2所选业绩类型的值 BenchValue
                      -->
                {{ info.prdStatus == '1' ? '新品首发' : info.benchValue ? format_money_decimal(info.benchValue) : '--' }}
              </div>
              <!-- 七日年化收益率 -->
              <div
                class="product_rate weight"
                :class="{
                  red: info.yield > 0,
                  green: info.yield < 0
                }"
                v-if="info.reserve1 == '1309' && info.profolioType == '1' && info.prdStatus != '1'"
              >
                {{ info.yield ? format_money_decimal(info.yield) : '--' }}
              </div>
              <!-- 业绩比较基准 -->
              <div
                class="product_rate red weight"
                :class="{
                  red: info.planVolRate > 0,
                  green: info.planVolRate < 0
                }"
                v-if="info.reserve1 == '1309' && (info.profolioType == '0' || (info.profolioType == '1' && info.prdStatus == '1'))"
              >
                {{ info.planVolRate ? info.planVolRate : '--' }}
              </div>
              <!-- 每万份收益 -->
              <div
                class="product_rate red weight"
                v-if="info.reserve1 == '1309' && info.prdTemplateCode == '1309'"
                :class="{
                  red: info.incomeUnit > 0,
                  green: info.incomeUnit < 0
                }"
              >
                {{ info.incomeUnit ? info.incomeUnit : '--' }}
              </div>

              <!-- 详见老代码onsaleProduct,但目前需求有改动 -->
              <div class="product_info weight" v-if="info.taCode == 'Y5' && info.reserve1 != '1309'">{{ info.openCycle ? info.openCycle : '--' }}</div>
              <div class="product_info weight" v-if="info.reserve1 == '1700'">灵活申赎</div>
              <div class="product_info weight" v-if="info.reserve1 == '1309'">灵活申赎</div>
              <div class="product_info weight" v-if="info.reserve1 == '1401'">每月开放</div>
              <div class="product_info weight" v-if="info.reserve1 == '1301' && info.cycleDays">每{{ info.cycleDays }}天开放</div>
              <!-- 以下暂时不确定 -->
              <div class="product_info weight" v-if="info.prdTemplate != '1' && info.prdTemplate != '2'">产品期限{{ info.productDate }}天</div>
            </div>
            <div class="info flex">
              <div class="gray" v-if="info.reserve1 != '1309'">
                <!-- 
                        标识2
                        募集期 删除
                        产品成立后 展示代销系统“主页面历史业绩”参数的值：ShowBenchType <<近一月年化>> 
                      -->
                {{ info.prdStatus == '1' ? '' : info.showBenchType | benchType }}
              </div>
              <!-- 产品成立后 -->
              <div class="gray" v-if="info.reserve1 == '1309' && info.profolioType == '1' && info.prdStatus != '1'">七日年化收益率</div>
              <!-- 募集期 -->
              <div class="gray" v-if="info.reserve1 == '1309' && (info.profolioType == '0' || (info.profolioType == '1' && info.prdStatus == '1'))">业绩比较基准</div>
              <div class="gray" v-if="info.reserve1 == '1309' && info.prdTemplateCode == '1309'">每万份收益</div>
              <div class="product_info_other">{{ info.riskLevel === '0' ? '未评定' : info.riskLevel === '1' ? '低风险' : info.riskLevel === '2' ? '中低风险' : info.riskLevel === '3' ? '中风险' : info.riskLevel === '4' ? '中高风险' : '高风险' }}|{{ info.pFirstAmt ? (info.taCode == 'Y5' ? info.pFirstAmt + '元' : info.pFirstAmt / 10000 + '万元') : '--' }}起购</div>
            </div>
          </div>
          <!-- 业绩比较基准栏目 -->
          <div class="product_baseline" v-if="info.reserve1 != '1309'" @click.stop="foldOpen(info.code)">
            <img v-if="info.benchExplainDetail && openArr.includes(info.code)" src="@/assets/img/financialShop/down.png" class="arrow" alt="down" />
            <img v-else-if="info.benchExplainDetail" src="@/assets/img/financialShop/up.png" class="arrow" alt="" />
            <p>业绩比较基准：{{ info.planVolRate }}</p>
            <!-- 业绩比较基准测算依据 -->
            <p :class="{ open: openArr.includes(info.code) }">{{ info.benchExplainDetail }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { format_money_decimal } from '@/utils/financial-utils'
export default {
  name: 'FinancialLicaiItem',
  components: {},
  data() {
    return {
      openSet: new Set(), // 保存业绩比较基准折叠标识，这里用Set防止标识重复
      changeTracker: 1 // 业绩比较基准折叠标识hack计数器
    }
  },
  props: {
    info: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    // 业绩比较基准折叠标识，解决data无法监听Set
    openArr() {
      return this.changeTracker && Array.from(this.openSet)
    }
  },
  filters: {
    benchType(type) {
      switch (type) {
        case '0':
          return '近1月年化'
        case '1':
          return '近3月年化'
        case '3':
          return '近6月年化'
        case '4':
          return '近1年年化'
        case '5':
          return '成立以来年化'
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    format_money_decimal,
    goToDetail(info) {
      // 理财
      this.$router.push({
        path: '/financialShop/financial-detail',
        query: {
          id: info.id
        }
      })
    },
    // 折叠展开
    foldOpen(code) {
      if (this.openArr.includes(code)) {
        this.openSet.delete(code)
        this.changeTracker -= 1
      } else {
        this.openSet.add(code)
        this.changeTracker += 1
      }

      console.log(code)
    }
  }
}
</script>
<style scoped lang='scss'>
.madp-financial-licai-item {
  .red {
    color: #ed5555;
  }
  .green {
    color: #5ba764;
  }
  .flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .white {
    background: white;
  }

  .weight {
    font-weight: bold;
  }
  .gray {
    color: gray;
  }
  .darkgray {
    color: #2c2c2c;
  }
  .center {
    text-align: center;
  }

  .bold {
    font-weight: bold;
  }
  .lh40 {
    line-height: 30px;
  }
  .lh50 {
    height: 50px;
    line-height: 50px;
  }

  .button {
    width: 50%;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
  }
  .content {
    font-size: 14px;
    .product_item {
      padding: 15px 10px;
      border-bottom: 1px solid #eee;
      .product_name {
        color: #202122;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .pro_contr {
        // width: 100px;
        opacity: 0.5;
      }
      .product_status {
        width: 50px;
        color: #ffa121;
        text-align: right;
      }
      .tip {
        color: #ff7d43;
        border: 1px solid #ff7d43;
        padding: 1px 0.10667rem;
        border-radius: 0.10667rem;
        font-size: 0.32rem;
        margin: 0.10667rem 0 0 0.08rem;
      }

      .product_content {
        .rate {
          align-items: center;
        }
        width: 95%;
        .product_rate {
          font-size: 24px;
          line-height: 45px;
        }
        .product_info {
          font-size: 16px;
          // line-height: 45px;
          width: 45%;
          text-align: left;
        }
        .product_rateInfo {
          font-size: 16px;
          line-height: 20px;
        }
        .product_info_other {
          font-size: 14px;
          width: 45%;
          color: gray;
        }
      }
      .product_baseline {
        position: relative;
        margin-top: 6px;
        padding: 4px 10px 4px 4px;

        background-color: rgb(239, 239, 239);
        font-size: 14px;
        color: gray;
        border-radius: 5px;
        p:last-child {
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          white-space: normal;
          text-overflow: ellipsis;
          word-break: break-all;
          overflow: hidden;
          &.open {
            display: inherit;
          }
        }
        .arrow {
          width: 12px;
          top: 18px;
          right: 5px;
          position: absolute;
        }
      }
    }
  }
}
</style>